<template>
  <div id="centerRight1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <div class="d-flex" style="margin-top: 5px">
          <span
            class="text mx-2"
            style="font-size: 18px; color: #108b96; font-weight: 600"
            >营业额数据统计</span
          >
        </div>
      </div>
      <div class="d-flex jc-center body-box flex-column">
        <div
          style="
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 0 30px;
          "
        >
          <div style="margin-top: 20px">
            <div style="color: #096d70">营业总额</div>
            <div style="margin-top: 10px">
              <dv-digital-flop
                :config="configNum"
                style="width: 200px; height: 50px; text-align: start"
              />
            </div>
          </div>
          <div style="margin-top: 20px">
            <div style="color: #096d70">订单总量</div>
            <div style="margin-top: 10px">
              <dv-digital-flop
                :config="configOrder"
                style="width: 200px; height: 50px; text-align: start"
              />
            </div>
          </div>
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            padding: 6px 30px;
          "
        >
          <div
            class="d-flex flex-column"
            style="
              height: 154px;
              justify-content: space-around;
              font-size: 17px;
            "
          >
            <div
              style="
                display: flex;
                justify-content: space-between;
                width: 315px;
              "
            >
              <div>吉林省</div>
              <div>营业总额: <span style="color: #b6a014">1234</span></div>
            </div>
            <div style="display: flex; justify-content: space-between">
              <div>吉林省</div>
              <div>营业总额: <span style="color: #b6a014">1234</span></div>
            </div>
            <div style="display: flex; justify-content: space-between">
              <div>吉林省</div>
              <div>营业总额: <span style="color: #b6a014">1234</span></div>
            </div>
            <div style="display: flex; justify-content: space-between">
              <div>吉林省</div>
              <div>营业总额: <span style="color: #b6a014">1234</span></div>
            </div>
          </div>
        </div>
        <!-- <dv-scroll-board class="dv-scr-board" :config="config" /> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      configNum: {
        number: [500],
        content: "{nt}",
        textAlign: "left",
      },
      configOrder: { number: [5454], content: "{nt}", textAlign: "left" },
    };
  },
  mounted() {
    setInterval(() => {
      this.formatter();
    }, 1000);
  },
  methods: {
    formatter() {
      this.configNum.number[0] = this.configNum.number[0] + 10;
      this.configNum = { ...this.configNum };
    },
  },
};
</script>

<style lang="scss" scoped>
$box-height: 340px;
$box-width: 450px;
#centerRight1 {
  padding: 10px 14px;
  padding-top: 20px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
      width: 270px;
      height: 340px;
    }
  }
}
</style>
